<template>
	<div class="addorder">
		<header>
			<i class="el-icon-notebook-2"><span> 下单-待从购物车转订单</span></i>
			<hr/>
		</header>
		<div class="shop">
			<template>
				<el-table :data="orders" border style="width: 100%">
						<el-table-column label="图片" width="200px">
							<template slot-scope="scope">
								<img :src="`${$ip}/api/public/showimg/${scope.row.book.pic}`"
									style="width: 110px;height: 100px;border-radius: 5px;">
							</template>
						</el-table-column>
						<el-table-column prop="book.name" label="商品名称" width="600px"></el-table-column>
						<el-table-column prop="price" label="商品价格"></el-table-column>
						<el-table-column prop="num" label="商品数量"></el-table-column>
						<el-table-column prop="price" label="商品总价"></el-table-column>
				</el-table>
			</template>
			<div class="div1">
				<p v-show="color==true">请确认收货信息</p>
				<span v-show="color==false">订单编号：{{ordid}}</span>
				<table>
					<tr>
						<td>姓名 <el-input type="text" v-model="user.name"/></td>
					</tr>
					<tr>
						<td>电话 <el-input type="tel" v-model="user.phone"/></td>
					</tr>
					<tr>
						<td>地址 <el-input type="text" v-model="user.addr"/></td>
					</tr>
				</table>
			</div>
			<div class="div2">
				<div class="div3">
					<p v-show="color==false">下单成功,订单号：{{ordid}}</p>
				</div>
				<span>总价：￥{{price}}</span>
				<el-button v-show="ordid==null" type="danger" @click="add()">下单</el-button>
				<el-button v-show="ordid!=null" type="danger" @click="payment()">付款</el-button>
			</div>
		</div>
	</div>
</template>

<script>
import { mapActions, mapState } from 'vuex';
export default {
	name:'AddOrder',
	data(){
		return{
			user:{},
			color:true,
			cart2ord:{
				ship2name:'',
				ship2phone:'',
				ship2addr:'',
				carts:[]
			},
			orders:[],
			ordid:null,
		}
	},
	computed:{
		...mapState('shop',['list']),
		price(){
			let sum=0;
			this.orders.forEach((item)=>{
				sum +=item.num * item.price;
				console.log('商品总价:'+sum);
			})
			return sum;
		}
	},
	methods: {
		...mapActions('shop',['actionHistory','delHistory']),
		// 购物车转订单
		add(){
			// 定义一个对象赋值修改信息
			let k={
				nickname:this.user.name,
				phone:this.user.phone,
				addr:this.user.addr
			}
			// 修改地址信息
			this.$postkv("/api/user/updateShip",k).then((resp)=>{
			    console.log(resp.data);
			})
			// 购物车转订单接口
			this.cart2ord.ship2name=this.user.name,
			this.cart2ord.ship2phone=this.user.phone,
			this.cart2ord.ship2addr=this.user.addr,
			this.cart2ord.carts=this.orders
			if(this.list==0) return;
			this.$postj("/api/fore/cart/add2Order",this.cart2ord).then((resp)=>{
				if(resp.data.data.ordid!=0){
					this.color =false;
					this.ordid =resp.data.data.ordid;
					console.log(this.ordid);
					this.$message({
					      message: resp.data.msg,
					      type: 'success'
					});
					this.delHistory();
				}else{
					this.$message.error('下单失败')
				}
			})
		},
		payment(){
			console.log(this.orders);
			this.$router.push({path:'/pc/pay',query:{id:this.ordid}});
		}
	},
	mounted(){
		this.orders =this.list;
		this.$get("/api/user/shipInfo").then((resp)=>{
		    this.user =resp.data.data;
		    console.log(resp.data.data);
		})
	}
}
</script>

<style scoped>
.addorder{
	width: 80%;
	margin: 0 auto;
}
.addorder header{
	width: 100%;
	height: 50px;
	margin-top: 10px;
	text-align: center;
}
.addorder header i{
	font-size: 16px;
	font-weight: 480;
}
.addorder .shop input[type="checkbox"]{
	width: 20px;
	height: 20px;
}
.addorder .shop input[type="checkbox"]:checked{
	background-color: deepskyblue;
}
.addorder .div1{
	width: 100%%;
	height: 180px;
	background-color: #efefef;
	border-radius: 8px;
}
.addorder .div1 p{
	margin-top: 12px;
	font-weight: bold;
	margin-left: 10px;
}
.addorder .div1 span{
	color: red;
}
.addorder .div1 table{
	width: 90%;
	margin: 0 auto;
	margin-top: 12px;
	margin-left: 8%;
}
.addorder .div1 table .el-input{
	width: 65%;
	text-indent: 0.5em;
}
.addorder .div2{
	width: 100%;
	display: flex;
	align-items: center;
	background-color: #efefef;
}
.addorder .div3{
	width: 79%;
	color: red;
	text-align: center;
}
.addorder .div2 span{
	width: 150px;
}
.addorder .div2 .el-button{
	width: 100px;
	margin-left: 50px;
}
</style>
